<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      html {
          height: 20px;
          width: 20px;
          background: #fff;
          /*overflow: hidden;*/
      }

      body {
          height: 60px;
          width: 60px;
          background: aqua;
          /*overflow: hidden;*/
      }

      #parent-parent {
          width: 80px;
          height: 80px;
          background: yellow;
         /* overflow: hidden;*/
      }

      #parent {
          width: 90px;
          height: 90px;
          background: red;
         /* overflow: hidden;*/
      }

      #target {
          width: 100px;
          height: 100px;
          background: blue;
      }
  </style>
</head>
<body>
<div id="parent-parent">
  <div id="parent">
    <div id="target"></div>
  </div>
</div>
<script>
  // 没有指定root，默认为浏览器视窗
  let observer = new IntersectionObserver(([entry]) => {
    alert(`相交矩形为: ${entry.intersectionRect.width} x ${entry.intersectionRect.width}`)
  })
  observer.observe(target)
</script>
</body>
</html>
